<!--<script>-->
<!--import events from './events'-->

<!--export default {-->
<!--  name: 'MultiTab',-->
<!--  data () {-->
<!--    return {-->
<!--      fullPathList: [],-->
<!--      pages: [],-->
<!--      activeKey: '',-->
<!--      newTabIndex: 0-->
<!--    }-->
<!--  },-->
<!--  created () {-->
<!--    // bind event-->
<!--    events.$on('open', val => {-->
<!--      if (!val) {-->
<!--        throw new Error(`multi-tab: open tab ${val} err`)-->
<!--      }-->
<!--      this.activeKey = val-->
<!--    }).$on('close', val => {-->
<!--      if (!val) {-->
<!--        this.closeThat(this.activeKey)-->
<!--        return-->
<!--      }-->
<!--      this.closeThat(val)-->
<!--    }).$on('rename', ({ key, name }) => {-->
<!--      console.log('rename', key, name)-->
<!--      try {-->
<!--        const item = this.pages.find(item => item.path === key)-->
<!--        item.meta.customTitle = name-->
<!--        this.$forceUpdate()-->
<!--      } catch (e) {-->
<!--      }-->
<!--    })-->

<!--    this.pages.push(this.$route)-->
<!--    this.fullPathList.push(this.$route.fullPath)-->
<!--    this.selectedLastPath()-->
<!--  },-->
<!--  methods: {-->
<!--    onEdit (targetKey, action) {-->
<!--      this[action](targetKey)-->
<!--    },-->
<!--    remove (targetKey) {-->
<!--      this.pages = this.pages.filter(page => page.fullPath !== targetKey)-->
<!--      this.fullPathList = this.fullPathList.filter(path => path !== targetKey)-->
<!--      // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页-->
<!--      if (!this.fullPathList.includes(this.activeKey)) {-->
<!--        this.selectedLastPath()-->
<!--      }-->
<!--    },-->
<!--    selectedLastPath () {-->
<!--      this.activeKey = this.fullPathList[this.fullPathList.length - 1]-->
<!--    },-->

<!--    // content menu-->
<!--    closeThat (e) {-->
<!--      // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭-->
<!--      if (this.fullPathList.length > 1) {-->
<!--        this.remove(e)-->
<!--      } else {-->
<!--        this.$message.info('这是最后一个标签了, 无法被关闭')-->
<!--      }-->
<!--    },-->
<!--    closeLeft (e) {-->
<!--      const currentIndex = this.fullPathList.indexOf(e)-->
<!--      if (currentIndex > 0) {-->
<!--        this.fullPathList.forEach((item, index) => {-->
<!--          if (index < currentIndex) {-->
<!--            this.remove(item)-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        this.$message.info('左侧没有标签')-->
<!--      }-->
<!--    },-->
<!--    closeRight (e) {-->
<!--      const currentIndex = this.fullPathList.indexOf(e)-->
<!--      if (currentIndex < (this.fullPathList.length - 1)) {-->
<!--        this.fullPathList.forEach((item, index) => {-->
<!--          if (index > currentIndex) {-->
<!--            this.remove(item)-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        this.$message.info('右侧没有标签')-->
<!--      }-->
<!--    },-->
<!--    closeAll (e) {-->
<!--      const currentIndex = this.fullPathList.indexOf(e)-->
<!--      this.fullPathList.forEach((item, index) => {-->
<!--        if (index !== currentIndex) {-->
<!--          this.remove(item)-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    closeMenuClick (key, route) {-->
<!--      this[key](route)-->
<!--    },-->
<!--    renderTabPaneMenu (e) {-->
<!--      return (-->
<!--        <a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>-->
<!--          <a-menu-item key="closeThat">关闭当前标签</a-menu-item>-->
<!--          <a-menu-item key="closeRight">关闭右侧</a-menu-item>-->
<!--          <a-menu-item key="closeLeft">关闭左侧</a-menu-item>-->
<!--          <a-menu-item key="closeAll">关闭全部</a-menu-item>-->
<!--        </a-menu>-->
<!--      )-->
<!--    },-->
<!--    // render-->
<!--    renderTabPane (title, keyPath) {-->
<!--      const menu = this.renderTabPaneMenu(keyPath)-->

<!--      return (-->
<!--        <a-dropdown overlay={menu} trigger={['contextmenu']}>-->
<!--          <span style={{ userSelect: 'none' }}>{ title }</span>-->
<!--        </a-dropdown>-->
<!--      )-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    '$route': function (newVal) {-->
<!--      this.activeKey = newVal.fullPath-->
<!--      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {-->
<!--        this.fullPathList.push(newVal.fullPath)-->
<!--        this.pages.push(newVal)-->
<!--      }-->
<!--    },-->
<!--    activeKey: function (newPathKey) {-->
<!--      this.$router.push({ path: newPathKey })-->
<!--    }-->
<!--  },-->
<!--  render () {-->
<!--    const { onEdit, $data: { pages } } = this-->
<!--    const panes = pages.map(page => {-->
<!--      return (-->
<!--        <a-tab-pane-->
<!--          style={{ height: 0 }}-->
<!--          tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}-->
<!--          key={page.fullPath} closable={pages.length > 1}-->
<!--        >-->
<!--        </a-tab-pane>)-->
<!--    })-->

<!--    return (-->
<!--      <div class="ant-pro-multi-tab">-->
<!--        <div class="ant-pro-multi-tab-wrapper">-->
<!--          <a-tabs-->
<!--            hideAdd-->
<!--            type={'editable-card'}-->
<!--            v-model={this.activeKey}-->
<!--            tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}-->
<!--            {...{ on: { edit: onEdit } }}>-->
<!--            {panes}-->
<!--          </a-tabs>-->
<!--        </div>-->
<!--      </div>-->
<!--    )-->
<!--  }-->
<!--}-->
<!--</script>-->
